<script setup lang="ts">
	import navbar from '@/wxcomponents/navbar'
	import { ref, reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { areaList } from '@vant/area-data';
	import { editaddress, addaddress, addressdetail,deleteaddress } from "@/api/user"
	let checked = ref(true)
	let show = ref(false)
	let addresslist : any = reactive({})
	addresslist = areaList
	console.log(areaList)
	let cascaderValue = ref('')
	let address : any = reactive({
		id: null,
		province: "",
		city: "",
		region: "",
		username: "",
		phone: "",
		address: "",
		is_default: 0
	})

	let fieldNames = ref({
		text: 'name',
		value: 'value',
		children: 'children'
	})
	// if (!addresslist.length) {
	// 	uni.request({
	// 		url: "https://wzkj-common.oss-cn-guangzhou.aliyuncs.com/common/city-label-compress.json",
	// 		method: 'GET',
	// 		success: (res) => {
	// 			addresslist = res.data
	// 			uni.setStorageSync("addresslist", res.data)
	// 		},
	// 		fail: err => {
	// 		}
	// 	});
	// }

	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}
	function onChange(e : any) {
		console.log(e)
		if (e.detail) {
			address.is_default = 1
		} else {
			address.is_default = 0
		}
		checked.value = e.detail
	}
	function showaddress() {
		show.value = true
	}
	function onClose() {
		show.value = false
	}
	function onFinish(e : any) {
		console.log(e)
		address.province = e.detail.values[0].name
		address.city = e.detail.values[1].name
		address.region = e.detail.values[2].name
		cascaderValue.value = e.detail.values[2].code
		show.value = false
	}
	function take() {
		if (!address.phone || !address.province || !address.city || !address.region || !address.username || !address.address) {
			uni.showToast({
				title: "请输入正确的收货信息",
				icon: "none"
			})
			return
		}

		const telCheck = /^1[3-9]\d{9}$/
		if (!telCheck.test(address.phone)) {
			uni.showToast({
				title: "请输入正确的手机号码",
				icon: "none"
			})
			return
		}
		if (address.id) {
			editaddress(address).then(res => {
				goBack()
			})
		} else {
			addaddress(address).then(res => {
				goBack()
			})
		}
	}
	function getaddressdetail() {
		addressdetail({ id: address.id }).then(res => {
			address.id = res.data.address.id
			address.province = res.data.address.province
			address.city = res.data.address.city
			address.region = res.data.address.region
			address.username = res.data.address.username
			address.phone = res.data.address.phone
			address.address = res.data.address.address
			address.is_default = res.data.address.is_default
			if (!address.is_default) {
				checked.value = false
			} else {
				checked.value = true
			}
		})
	}
	function onlydeleteaddress() {
		deleteaddress({ id: address.id }).then(res => {
			goBack()
		})
	}
	function shezhi() {
		checked.value = true
		address.is_default = 1
	}
	onLoad((option : any) => {
		if (option.id) {
			address.id = option.id
			getaddressdetail()
		}
	});
</script>

<template>
	<view class="content1">
		<navbar title="收货人地址" @goBack="goBack"></navbar>
		<view class="padding24-all package-box white" style="padding-bottom: 0;background-color: #42424E;">
			<view class="flex flex-row inputbg">
				<text class="text">收件人姓名</text>
				<input class="inputvalue" placeholder="请输入收货人真实姓名" maxlength="11" v-model="address.username"
					placeholder-style="color:rgba(255, 255, 255, 0.65);" />
			</view>
			<view class="flex flex-row inputbg">
				<text class="text">手机号</text>
				<input class="inputvalue" v-model="address.phone" maxlength="11" placeholder="请输入收货人手机号"
					placeholder-style="color: rgba(255, 255, 255, 0.65);" />
			</view>
			<view class="flex flex-row inputbg">
				<text class="text">所在地区</text>
				<view @click="showaddress" class="flex flex-row " style="flex: 1;align-items: center;">
					{{ address.province ? address.province : '请选择所在的地区' }} {{ address.city }} {{ address.region }}
				</view>
			</view>
			<!-- 		<view class="flex flex-row inputbg">
				<text class="text">街道地址</text>
				<input class="inputvalue" placeholder="请选择街道地址" placeholder-style="color: #CFD1D8;" />
				<image src="../../../static/icon/activity/jiantou.png" class="arrow-right"></image>
			</view> -->
			<view class="flex flex-row inputbg">
				<text class="text">详细地址</text>
				<input class="inputvalue" placeholder="请输入详细地址" v-model="address.address"
					placeholder-style="color: rgba(255, 255, 255, 0.65);" />
			</view>
			<view class="flex flex-row inputbg justify-content-bt">
				<text class="text" style="width: 350rpx;" @click="shezhi">设为默认地址</text>
				<van-switch :checked="checked" @change="onChange" active-color="#FDE29B" inactive-color="#ffffff" />
			</view>
		</view>
		<view style="text-align: center;" class="btn">
			<!-- <view class="btntext1 fweight500 fsize36 black" @click="onlydeleteaddress" v-if="address.id">删除</view> -->
			<view class="btntext fweight500 fsize36 black" @click="take"></view>
		</view>
		<van-popup :show="show" round position="bottom">
			<!-- <van-cascader :value="cascaderValue" :field-names="fieldNames" title="请选择所在地区"
				:options="addresslist" @close="onClose" @finish="onFinish" /> -->
			<van-area :area-list="addresslist" :value="cascaderValue" @confirm="onFinish" @cancel="onClose" />
		</van-popup>
	</view>
</template>

<style lang="scss">
	@import "src/static/scss/common";

	.btn {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 60rpx;
		z-index: 3;

		.btntext {
			width: 686rpx;
			background-image: url("/static/owo/address-confirm-btn1.png");
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: contain;
			height: 84rpx;
			color: #7A5E15;
			margin-bottom: 20rpx;
		}
		.btntext1 {
			width: 686rpx;
			height: 84rpx;
			border:solid 2rpx #ffffff;
			line-height: 88rpx;
			color: #ffffff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
		}
	}

	.inputbg {
		align-items: center;
		padding: 40rpx 0;
		position: relative;

		.text {
			display: inline-block;
			width: 160rpx;
			margin-right: 28rpx;
			color: #ffffff;
		}

		.inputvalue {
			color: #ffffff;
			flex: 1;
		}

		.arrow-right {
			position: absolute;
			right: 0;
			top: 50%;
			width: 36rpx;
			height: 36rpx;
			transform: translateY(-50%);
		}
	}

	.inputbg:last-child {
		border: none;
	}

	.app-container {
		//display: flex;
		padding: 0 15rpx 0 15rpx;
		//flex-direction: column;
	}

	view {
		box-sizing: border-box;
	}

	.bradius10 {
		border-radius: 10rpx;
	}

	.bradius20 {
		border-radius: 20rpx;
	}

	.bradius30 {
		border-radius: 30rpx;
	}

	.bradius50 {
		border-radius: 50%;
	}

	.padding24-all {
		padding: 24rpx;
	}

	.padding16 {
		padding: 16rpx;
	}

	.padding24 {
		padding: 0 24rpx;
	}

	.padding32-top-bt {
		padding: 32rpx 0;
	}

	.padding24-top {
		padding-top: 24rpx;
	}

	.padding20-top {
		padding-top: 20rpx;
	}

	.margin16_top {
		margin-top: 16rpx;
	}

	.margin48_top {
		margin-top: 48rpx;
	}

	.margin40_top {
		margin-top: 40rpx;
	}

	.margin32_top {
		margin-top: 32rpx;
	}

	.margin24_top {
		margin-top: 24rpx;
	}

	.margin23_top {
		margin-top: 23rpx;
	}

	.margin20_top {
		margin-top: 20rpx;
	}

	.margin14_top {
		margin-top: 14rpx;
	}

	.margin12_top {
		margin-top: 12rpx;
	}

	.margin40_bt {
		margin-bottom: 40rpx;
	}

	.margin24_bt {
		margin-bottom: 24rpx;
	}

	.margin16_bt {
		margin-bottom: 16rpx;
	}

	.flex {
		display: flex;
	}

	.flex-row {
		flex-direction: row;
	}

	.justify-content-bt {
		justify-content: space-between;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.bg-F4 {
		background-color: #f4f4f4;
	}

	.maincolor {
		color: #BAFF00;
	}

	.black333 {
		color: #333333;
	}

	.gray999 {
		color: #999999;
	}

	.grayaaa {
		color: #AAAAAA;
	}

	.grayD8 {
		color: #CFD1D8;
	}

	.white {
		color: white;
	}

	.red {
		color: #FF1E1E;
	}

	.gray999 {
		color: #999999;
	}

	.blue {
		color: #2784FF;
	}


	.gray66 {
		color: #666666;
	}

	.fsize56 {
		font-size: 56rpx;
	}

	.fsize48 {
		font-size: 48rpx;
	}

	.fsize44 {
		font-size: 44rpx;
	}

	.fsize42 {
		font-size: 42rpx;
	}

	.fsize40 {
		font-size: 40rpx;
	}

	.fsize36 {
		font-size: 36rpx;
	}

	.fsize32 {
		font-size: 32rpx;
	}

	.fsize28 {
		font-size: 28rpx;
	}

	.fsize24 {
		font-size: 24rpx;
	}

	.fsize22 {
		font-size: 22rpx;
	}

	.fsize20 {
		font-size: 20rpx;
	}

	.fsize18 {
		font-size: 18rpx;
	}

	.fweight600 {
		font-weight: 600;
	}

	.fweight500 {
		font-weight: 500;
	}
</style>